<template>
  <div class="filebox">
    <!-- 用户资料表单 -->
    <el-form ref="form" :rules="rules" :model="userInfoForm" label-width="5rem">
      <el-form-item class="imgshow">
        <!-- 头像上传控件 -->
        <el-upload
          class="avatar-uploader"
          ref="upload"
          action="string"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          list-type="picture-card"
          :http-request="handleHttpRequest"
          :on-change="fileChange"
        >
          <img
            v-if="userInfoForm.image"
            :src="userInfoForm.image"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="uname">{{ userInfoForm.nickname }}</div>
      </el-form-item>
      <el-form-item label="昵称 :" prop="nickname">
        <el-input
          v-model="userInfoForm.nickname"
          placeholder="请输入昵称"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item class="wxbind" label="微信 :"> 已绑定 </el-form-item> -->
      <el-form-item label="邮箱 :" prop="email">
        <el-input
          v-model="userInfoForm.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号 :">
        <el-input
          @keyup="this.value = this.value.replace(/\D/g, '')"
          v-model="userInfoForm.mobile"
          placeholder="请输入手机号"
        ></el-input>
        <!-- <i class="iconfont icon-bianji1" ref="icon" @click="handleIconClick">
        </i> -->
      </el-form-item>
      <el-form-item label="地区 :">
        <el-input
          v-model="userInfoForm.address"
          placeholder="请输入地区"
        ></el-input>
      </el-form-item>
      <el-form-item label="生日 :">
        <el-date-picker
          :picker-options="pickerOptions"
          v-model="userInfoForm.birthday"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别 :">
        <el-select v-model="userInfoForm.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-button @click="updateProfile" class="saveprofile">保存</el-button>
    </el-form>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
import userUtil from "../../../utils/userUtil";
import { uploadFile } from '@/utils/http'
export default {
  data () {
    // 验证邮箱的校验规则
    let checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

      if (regEmail.test(value)) {
        // 合法的邮箱
        return callback()
      }
      // 不合法的邮箱
      callback(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的校验规则
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback()
      }
      // 不合法
      callback(new Error('请输入合法手机号'))
    }

    return {
      // 限制生日截止当前日期
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      userInfoForm: {
        image: '',
        nickname: '',
        email: '',
        mobile: '',
        address: '',
        birthday: '',
        sex: ''
      },
      avatarUrl: '',
      rules: { // 表单校验规则
        // 邮箱校验
        email: [
          { message: '请输入合法的邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        // 手机号校验
        mobile: [
          { required: false, message: '非必填项', trigger: 'blur' },
          { message: '请输入合法手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        // 昵称校验
        nickname: [
          { required: false, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 9, message: '长度在 1 到 9 个字符', trigger: 'blur' }
        ],
      },
      imageUrl: '',
    }
  },
  created () {
    if (userUtil.isNotLogin()) {
      this.$router.push("toLogin")
      return
    }

    this.userInfoForm = userUtil.get()
  },
  methods: {
    genderChange () { },
    // 确认修改信息，提交
    // 更新个人信息
    updateProfile () {
      var that = this
      // 表单校验
      let time = new Date(this.userInfoForm.birthday)
      var datetime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
      this.userInfoForm.birthday = datetime
      this.$refs.form.validate(valid => {
        // if (!valid) return
        sendPost(api.updateBase, this.userInfoForm).then(res => {
          if (res.success ==0 ) {
            userUtil.set(that.userInfoForm);
            // that.$msg.success(res.data.msg);
            that.$router.go(0)
            this.$msg.success('修改成功!')

          } else {
            that.$msg.info(res.msg);
          }
        })
      })

    },
    handleHttpRequest (param) {
      console.log(param.file);
      var that = this
      const formData = new FormData()
      formData.append('file', param.file)
      uploadFile(param.file, "IMAGE_PATH").then(res => {
        console.log(res);
        that.userInfoForm.image = res.showUrl
      })

    },
    fileChange (file) {
      this.$refs.upload.clearFiles() //清除文件对象
      this.logo = file.raw // 取出上传文件的对象，在其它地方也可以使用
      this.fileList = [{ name: file.name, url: file.url }] // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },

  }
}
</script>

<style>
.el-cascader-menu__wrap,
.el-cascader-menu__list {
  height: 6.375rem !important;
}
</style>
<style lang="less" scoped>
.imgshow {
  padding-left: 5.1875rem;
  margin-bottom: 4.8125rem;
  .avatar-uploader {
    width: 7.5rem;
    height: 7.5rem;
    border: 0.1875rem dashed #eee;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
    img {
      width: 7.5rem;
      height: 7.5rem;
      display: block;
    }
    .el-icon-plus {
      font-size: 3.75rem;
      color: #eee;
      position: absolute;
      top: 1.6875rem;
      left: 1.875rem;
    }
  }
  .uname {
    font-size: 1.125rem;
    color: #333;
    position: absolute;
    left: 0.4375rem;
    bottom: -2.5rem;
    text-align: center;
    line-height: 3.75rem;
    height: 2.1875rem;
    text-align: center;
    width: 7.5rem;
  }
}
.iconfont {
  cursor: pointer;
  position: absolute;
  left: 0.5rem;
  top: 0.1875rem;
}
.el-form-item__content {
  position: relative;
}
.el-form {
  width: 23.75rem;
  margin: 3.4375rem auto 0;
  position: relative;
  .editphone {
    font-size: 0.875rem;
    position: relative;
    display: inline-block;
    width: 18.75rem;
    height: 2.5rem;
    padding: 0.125rem 0.625rem;
    box-sizing: border-box;
    border: 1px solid #eee;
    cursor: pointer;
  }
}
.saveprofile {
  background-color: #ff5342;
  width: 12.5rem;
  height: 3.125rem;
  color: #fff;
  border-radius: 0.625rem;
  position: absolute;
  left: 50%;
  bottom: -6.6875rem;
  transform: translate(-50%, -50%);
}
.wxbind {
  font-size: 1.125rem;
  color: #333;
}
</style>
